<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <!--引入样式-->
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/common.css">

    <!-- 引入轮播插件的样式 -->
    <link rel="stylesheet" href="../lib/plugins/slider/css/slider.css">
    <!--引入当前文件样式-->
    <link rel="stylesheet" href="../css/shoppingcart.css">
</head>

<body>
    <!--头部head-->
    <section id="head" class="head">
        <div id="headTop" class="head-top">
            <div class="head-top-text container">
                <img src="../imgs/logo.jpg" alt="">
                <span>legochina.cn</span>
                <span class="fr">欢迎光临乐购，请 <a href="">登陆</a>\<a href="">注册</a></span>
            </div>
        </div>
        <div class="head-bom container clearfix">
           
            <div class="fr clearfix">
                <input type="text" placeholder="创意文具"><button></button>
                <p class="cart"><span>&emsp;购物车</span></p>
                <p>我的订单</p>
            </div>
            <ul class="nav fr">
                <li>图书</li>
                <li>电子书</li>
                <li>原创文学</li>
                <li>服装</li>
                <li>运动户外</li>
                <li>孕婴童</li>
                <li>家居</li>
                <li>创意文具</li>
                <li>地方特产</li>
                <li>海外购</li>
                <li>电器城</li>
            </ul>
        </div>
    </section>
    <!--购物车-->
    <div class="container">
        <!--购物车列表头部-->
        <div class="cartheader  mt40">
            <p>填写并核对订单信息</p>
            <ul class="list-header clearfix ">
                <li class="list_chk fl"><input class="all_check" type="checkbox">全选</li>
                <li class="list_con fl">商品信息</li>
                <li class="list_info fl">商品参数</li>
                <li class="list_price fl">单价</li>
                <li class="list_amount fl">数量</li>
                <li class="list_sum fl">小计</li>
                <li class="list_op fl">操作</li>
            </ul>
        </div>
        <!--订单区域-->
        <div class="order_content">
            <ul class="order_lists mt30 clearfix">
                <li class="list_chk fl">
                    <input class="son_check" type="checkbox">
                </li>
                <li class="list_con fl">
                    <div class="list_img fl">
                        <a href="#">
                            <img src="../imgs/cart1.jpg" alt="">
                        </a>
                    </div>
                    <div class="list_text fl">
                        <a href="#">木果果木2016秋装新品韩范简约宽松中长款纯棉长袖衬衫</a>
                    </div>
                </li>
                <li class="list_info fl">
                    <p>规格：默认</p>
                    <p>尺寸：16*16*3(cm)</p>
                  </li>
                <li class="list_price fl">
                    <!-- 单价 -->
                    <p class="price">￥<span>500</span></p>
                  </li>
                <!-- 数量  -->
                <li class="list_amount fl">
            <div class="amount_box clearfix">
              <!-- 减 -->
              <span class="reduce fl">-</span>
              <input type="text" value="1" class="sum fl">
              <!--  加 -->
              <span class="plus fl">+</span>
            </div>
                </li>
                <li class="list_sum fl">
                    <!-- 小计结果 -->
                    <p class="sum_price">￥<span>500</span></p>
                  </li>
                  <li class="list_op fl">
                    <p class="del">
                      <a class="delbtn">移除商品</a>
                    </p>
                  </li>
            </ul>
            <ul class="order_lists mt30 clearfix">
                <li class="list_chk fl">
                    <input class="son_check" type="checkbox">
                </li>
                <li class="list_con fl">
                    <div class="list_img fl">
                        <a href="#">
                            <img src="../imgs/cart1.jpg" alt="">
                        </a>
                    </div>
                    <div class="list_text fl">
                        <a href="#">木果果木2016秋装新品韩范简约宽松中长款纯棉长袖衬衫</a>
                    </div>
                </li>
                <li class="list_info fl">
                    <p>规格：默认</p>
                    <p>尺寸：16*16*3(cm)</p>
                  </li>
                <li class="list_price fl">
                    <!-- 单价 -->
                    <p class="price">￥<span>500</span></p>
                  </li>
                <!-- 数量  -->
                <li class="list_amount fl">
            <div class="amount_box clearfix">
              <!-- 减 -->
              <span class="reduce fl">-</span>
              <input type="text" value="1" class="sum fl">
              <!--  加 -->
              <span class="plus fl">+</span>
            </div>
                </li>
                <li class="list_sum fl">
                    <!-- 小计结果 -->
                    <p class="sum_price">￥<span>500</span></p>
                  </li>
                  <li class="list_op fl">
                    <p class="del">
                      <a class="delbtn">移除商品</a>
                    </p>
                  </li>
            </ul>
        </div>
         <!-- 底部 -->
        <div class="btmbox">

            <!-- <input type="checkbox" class="all_check ml30">
              <span>全选</span>  -->
            <a class="delallsel">删除选中商品</a>
            <p class="fr">
              <span>已选择<strong class="cf40 amount">0</strong>件商品</span>
              <span>共计<strong class="cf40 totalprice">0.00</strong>元</span>
              <a href="#">去结算</a>
            </p>
      
      
          </div>
    </div>
  
    <!--页尾 footer-->
    <section id="footer" class="footer">
        <div class="footer-top">
            <ul class="after-service clearfix container">
                <li class="after-service-text fl">
                    <a href=""><img src="../imgs/222_11.png" alt=""></a>
                </li>
                <li class="after-service-text fl">
                    <a href=""><img src="../imgs/222_13(1).png" alt=""></a>
                </li>
                <li class="after-service-text fl">
                    <a href=""><img src="../imgs/222_15.png" alt=""></a>
                </li>
                <li class="after-service-text fl">
                    <a href=""><img src="../imgs/222_17.png" alt=""></a>
                </li>
            </ul>

        </div>
        <div class="footer-bom container clearfix">
            <ul>
                
                <li class="footer-bom-list fl">
                    <p class="footer-bom-nav">购物指南</p>
                    <a class="footer-bom-link" href="">购物流程</a><br>
                    <a class="footer-bom-link" href="">发票制度 </a><br>   
                    <a class="footer-bom-link" href="">账户管理</a><br>
                    <a class="footer-bom-link" href=""> 会员优惠</a>
                </li>
                
                <li class="footer-bom-list fl">
                    <p class="footer-bom-nav">支付方式</p>
                    <a class="footer-bom-link" href="">货到付款</a><br>
                    <a class="footer-bom-link" href="">网上支付</a><br>   
                    <a class="footer-bom-link" href="">礼品卡支付</a><br>
                    <a class="footer-bom-link" href="">银行转帐</a>
                </li>
                <li class="footer-bom-list fl">
                    <p class="footer-bom-nav">订单服务</p>
                    <a class="footer-bom-link" href="">订单配送查询</a><br>
                    <a class="footer-bom-link" href="">订单状态说明</a><br>   
                    <a class="footer-bom-link" href="">自助取消订单</a><br>
                    <a class="footer-bom-link" href="">自助修改订单</a>
                </li>
                <li class="footer-bom-list fl">
                    <p class="footer-bom-nav">退换货</p>
                    <a class="footer-bom-link" href="">退换货政策</a><br>
                    <a class="footer-bom-link" href="">自助申请退换货</a><br>   
                    <a class="footer-bom-link" href="">退换货进度查询</a><br>
                    <a class="footer-bom-link" href="">退款方式和时间</a>
                </li>
                <li class="footer-bom-list fl">
                    <p class="footer-bom-nav">"商家服务</p>
                    <a class="footer-bom-link" href="">商家中心</a><br>
                    <a class="footer-bom-link" href=""> 运营服务</a><br>   
                    <a class="footer-bom-link" href="">加入尾品汇</a>  
                </li>
               
                    
                
                

            </ul>
            <img class="fr" src="../imgs/logo_00.png" alt="">
        </div>
        <p class="footer-list  container">
            <a class="footer-link" href="">  公司简介  |</a>
            <a class="footer-link" href="">  Investor Relations  | </a>
            <a class="footer-link" href="">  网站联盟  |</a>
            <a class="footer-link" href="">  乐购招商  |</a>
            <a class="footer-link" href="">  机构销售  |</a>
            <a class="footer-link" href="">  手机乐购  |</a>
            <a class="footer-link" href="">  官方Blog   |</a>
            <a class="footer-link" href="">  热词搜索</a>
        </p>
        <p class="license">Copyright (C) 乐购网 2004-2016, All Rights Reserved</p>
    </section>
    <!--引入轮播插件  注意要先引入jQuery库-->
    <script src="../lib/plugins/slider/lib/jquery.min.js"></script>
    <script src="../lib/plugins/slider/lib/jquery.slidebox.js"></script>
    <!--引入购物车-->
    <script src="../lib/cart/jquery.js"></script>
    <script src="../js/shoppingcart.js"></script>
</body>

</html>